<template>
  <div>
    <div class="helper-center">
      <!-- <div class="share-btn">
        <mt-button @click.native="">联系我们</mt-button>
        <mt-button @click.native="">问题反馈</mt-button>
      </div> -->
      <div class="grid">
        <div class="item"
          v-for="(v, k) in grid" :key="k"
          @click="$router.push({name: 'HelperDetail', params: {id: v.id}})"
        >
          <img class="icon" :src="v.icon">
          <span class="text">{{v.title}}</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="title">热门问题</div>
      <div class="question" v-for="(val, k) in list" :key="k">
        <div class="wrapper" ref="qt">
          <img class="icon" :src="grid[k - 1].icon">
          <span class="text">{{grid[k - 1].title}}</span>
        </div>
        <div class="list" ref="q">
          <div class="item"
            v-for="v in val" :key="v.id"
            :class="{active: inArray(long, v.id) !== false}"
            @click="chooseLong(v.id)"
          >
            <p v-html="v.question"></p>
            <span v-html="v.answer"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Helper',
    data () {
      return {
        grid: [],
        list: [],
        long: []
      }
    },
    methods: {
      getList () {
        this.$post('/vue/help_center/get_list', '').then(data => {
          // 分类列表
          let tmpIcon = [
            '/src/assets/icons/help-sell.png',
            '/src/assets/icons/help-buy.png',
            '/src/assets/icons/help-money.png',
            '/src/assets/icons/help-bag.png',
            '/src/assets/icons/help-act.png',
            '/src/assets/icons/help-pufa.png'
          ]
          for (let i in data.category) {
            this.grid.push({id: i, title: data.category[i], icon: tmpIcon[i - 1]})
          }
          // 热门问题列表
          this.list = data.list
          // 修改高度
          this.$nextTick(() => {
            const qs = this.$refs.q
            for (let i = 0; i < qs.length; i++) {
              let height = this.$refs.q[i].getBoundingClientRect().height
              this.$refs.qt[i].style.height = `${height - 1}px`
            }
          })
        })
      },
      chooseLong (id) {
        let index = this.inArray(this.long, id)
        if (index !== false) {
          this.long.splice(index, 1)
        } else {
          this.long.push(id)
        }
        // 修改高度
        this.$nextTick(() => {
          const qs = this.$refs.q
          for (let i = 0; i < qs.length; i++) {
            let height = this.$refs.q[i].getBoundingClientRect().height
            this.$refs.qt[i].style.height = `${height - 1}px`
          }
        })
      },
      inArray (arr, val) {
        for (let i = 0; i < arr.length; i++) {
          if (val === arr[i]) {
            return i
          }
        }
        return false
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-226: rgb(226, 226, 226);
  @c-blue: rgb(108, 184, 222);

  .helper-center {
    background-color: #FFF;
    height: calc(~'100vh - 57px');
    padding-bottom: 57px;
    overflow-x: hidden;
    overflow-y: scroll;
    .grid {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: space-between;
      .item {
        width: 33.3%;
        padding: 16px 0;
        flex: 0 0 auto;
        border-bottom: 1px solid @c-226;
        position: relative;
        .icon {
          width: 40px;
          height: 40px;
          display: block;
          margin: 0 auto;
        }
        .text {
          font-size: 13px;
          font-weight: bold;
          line-height: 24px;
          color: @c-124;
          display: block;
        }
        &::after {
          content: '';
          width: 1px;
          height: 40px;
          background-color: @c-226;
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          left: auto;
          margin: auto;
        }
        &:nth-child(3n)::after {
          display: none;
        }
      }
    }
    .line {
      height: 8px;
      background-color: rgb(240, 244, 247);
    }
    .title {
      padding: 12px;
      font-size: 13px;
      font-weight: bold;
      line-height: 24px;
      text-align: left;
      color: @c-124;
    }
    .question {
      border-top: 1px solid @c-226;
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: space-between;
      &:nth-last-child(1) {
        border-bottom: 1px solid @c-226;
      }
      .wrapper {
        width: 30%;
        min-height: 72px;
        border-right: 1px solid @c-226;
        box-sizing: border-box;
        flex: 0 1 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        .icon {
          width: 40px;
          height: 40px;
          display: block;
          margin: 0 auto;
        }
        .text {
          width: 100%;
          font-size: 13px;
          font-weight: bold;
          line-height: 24px;
          color: @c-124;
          display: block;
        }
      }
      .list {
        width: 70%;
        flex: 0 1 auto;
        .item {
          padding: 6px;
          height: 36px;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          text-align: left;
          border-bottom: 1px solid @c-226;
          overflow: hidden;
          position: relative;
          transition: .25s all;
          &.active {
            height: auto;
          }
          &:last-child {
            border: 0;
          }
          &:active {
            background-color: rgba(0, 0, 0, .1);
          }
          &::after {
            border: 1px solid #c8c8cd;
            border-bottom-width: 0;
            border-left-width: 0;
            content: '';
            top: 16px;
            right: 5vw;
            position: absolute;
            width: 7px;
            height: 7px;
            transform: translateY(-50%) rotate(135deg);
          }
        }
      }
    }
    .share-btn {
      padding: 8px 0;
      border-top: 1px solid @c-226;
      position: fixed;
      width: 100%;
      bottom: 0;
      background-color: #FFF;
      font-size: 0;
      img {
        width: 24px;
        height: 24px;
      }
      .mint-button {
        height: 40px;
        margin: 0 5%;
        padding: 7px 0;
        width: 36%;
        line-height: 0;
        text-align: center;
        background-color: #fff;
        border: 2px solid @c-blue;
        border-radius: 20px;
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: @c-blue;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>